<template>
	<view class="content">
		<map style="width: 100%; height: 400px;" :latitude="latitude" :longitude="longitude" :markers="covers">
		</map>
		<view style="width: 750rpx;height: 350rpx;">
			<view style="width: 710rpx;margin-left: 20rpx;">
				<view style="margin-left: 600rpx;color: blue;margin-top: 10rpx;">
					44m
				</view>
				<view style="font-weight: bolder;">
					伟业汽车维修厂(人民路店)
				</view>
				<view style="display: flex;">
					<view style="height: 150rpx;width: 500rpx;">
						<uni-rate value="3" :size="18" style="display: inline-block;" /> <text
							style="margin-left: 10rpx;">3分</text>
						<view style="font-weight: bolder;font-size: 28rpx;">营业时间：周一至周五 09:00-22:00</view>
						<view style="font-weight: bolder;font-size: 28rpx;">山阳区人民中路32号</view>
					</view>
					<image src="../../static/小王美容汽车店.png"
						style="width: 200rpx;height: 120rpx;margin-top: 15rpx;margin-left: 70rpx;" />
				</view>
				<view style="display: flex;">
					<button style="width: 350rpx;height: 100rpx;" @click="toggle('bottom')">联系门店</button>
					<button style="width: 350rpx;height: 100rpx;" @click="lijiyuding">立即预定</button>
				</view>

				<!-- 普通弹窗 -->
				<uni-popup ref="popup" background-color="#fff">
					<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
						<text class="text">
						</text>
						<view
							style="width: 90%; text-align: center;font-size:50rpx;height: 50rpx;line-height:50rpx;border-bottom: 2rpx solid #FFFFFF;margin-bottom: 10rpx;">
							18893029302
						</view>
						<view
							style="width: 90%; text-align: center; font-size:50rpx;height: 80rpx;line-height:80rpx;border-bottom: 2rpx solid #FFFFFF ;margin-bottom: 10rpx;">
							呼叫
						</view>
						<view
							style=" width: 90%; text-align: center;font-size:50rpx;height: 50rpx;line-height:50rpx;border-bottom: 2rpx solid #FFFFFF;"
							@click="cancel">
							取消
						</view>
					</view>
				</uni-popup>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 39.909,
				longitude: 116.39742,
				type: 'bottom',
				covers: [{
					latitude: 39.909,
					longitude: 116.39742,
					iconPath: '../../static/椭圆.png'
				}, {
					latitude: 39.90,
					longitude: 116.39,
					iconPath: '../../static/椭圆.png'
				}]
			}
		},
		methods: {

			lijiyuding() {
				console.log("384895y8965"),
					uni.navigateTo({
						url: "/pages/storedetail/storedetail"
					})
			},
			toggle(type) {
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			},
			cancel() {
				this.$refs.popup.close()
			}
		}
	}
</script>

<style>
	page {
		width: 750rpx;
		background-color: white;
	}

	.content {
		width: 750rpx;
		background-color: white;
	}

	.popup-height {
		height: 300rpx;
		width: 200px;
	}

	.popup-content {

		align-items: center;
		justify-content: center;
		padding: 15px;
		height: 100px;
		background-color: #fff;
	}
</style>